<template>
    <div class="address">
        <Navbar :back="true" title="地址管理" bg="transparent" color="var(--background-from)" />
        <div class="address__container">
            <ul class="address__list" v-show="list.length !== 0">
                <li class="item" @click="pathTo(item)" v-for="item in list" :key="item.id">
                    <div class="item__frist-word">{{ item.name.charAt(0) }}</div>
                    <div class="item__message">
                        <p class="item__digest">{{ item.name }} {{ item.phone }}</p>
                        <p class="item__address">{{ item.address }}</p>
                    </div>
                    <div class="item__edit">
                        <van-icon @click.stop="changePopup('edit', item.id)" v-show="!manageFlag" name="edit" />
                        <van-checkbox @click.stop v-show="manageFlag" v-model="item.check"
                            checked-color="#ffcd41"></van-checkbox>
                    </div>
                </li>

            </ul>
            <div class="address__control">
                <button @click="changeManageFlag">{{ manageFlag ? "取消" : "管理" }}</button>
                <button @click="deleteItem" :class="manageFlag && 'delete'">{{ manageFlag ? "删除" : "+ 新建地址" }}</button>
            </div>
        </div>
        <pupop v-model="popupFlag" :mode="mode" @changeList="changeList" />
    </div>
</template>
<script setup lang="ts">
interface Addr {
    name: string
    phone: string
    address: string
}
export interface AddrItem extends Addr {
    check: boolean
    id: number
}

import Navbar from '@/components/Navbar.vue'
import pupop from './components/messgaePopup.vue'
import { getAddr, setAddr, putAddr, delAddr } from '@/api'
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const uid = JSON.parse(localStorage.getItem("userInfo")).id

const route = useRoute()
const router = useRouter()
console.log(route.query.type);
const manageFlag = ref<boolean>(false)
const popupFlag = ref<boolean>(false)
const mode = ref<string>('add')
const changeListId = ref<number>(-1)
const list = ref<AddrItem[]>([{
    id: 0,
    name: "颤三",
    phone: "1213131313",
    address: "广东省茂名市电白区小良镇",
    check: false
}, {
    id: 1,
    name: "颤无",
    phone: "1213131313",
    address: "广东省茂名市电白区小良镇",
    check: false
}])
function deleteItem() {
    if (manageFlag.value) {
        let ids = list.value.filter(item => item.check === true).map(item => item.id + "")
        delAddr(ids).then(res => {
            console.log(res)
        })
        list.value = list.value.filter(item => !item.check)
        return
    }
    changePopup("add")
}
function changePopup(m: string, id = -1) {
    mode.value = m
    popupFlag.value = true
    changeListId.value = id
    console.log(changeListId.value);
}
function changeManageFlag() {
    if (list.value.length) manageFlag.value = !manageFlag.value
}
watch(list, (newVal) => {
    if (!newVal.length) {
        manageFlag.value = false
    }
})
const changeList = (opt: Addr) => {
    popupFlag.value = false
    if (changeListId.value !== -1) {
        let index = list.value.findIndex(item => item.id === changeListId.value)
        list.value[index] = { ...list.value[index], ...opt }
        console.log(list.value[index].id, opt.name, opt.phone, opt.address)
        putAddr(list.value[index].id + "", opt.name, opt.phone, opt.address).then(res => {
            console.log(res)
        })
        return
    } else {
        setAddr(uid, opt.name, opt.phone, opt.address).then(res => {
            console.log(res)
        })
        list.value.push({ ...opt, id: list.value.length, check: false })
    }

}
const pathTo = (item: AddrItem) => {
    router.replace({ path: '/confirmOrder', query: { item: JSON.stringify(item) } })
}
const initData = () => {
    getAddr(uid).then(res => {
        console.log(res.data)
        list.value = res.data.map(item => {
            return { ...item, address: item.addr, check: false }
        })
        console.log(list.value)
    })
}
initData()
</script>
<style lang="scss">
.address {
    height: 100vh;
    font-size: 16rem;
    background: linear-gradient(to bottom,
            var(--background-from),
            var(--background-to));
    color: var(--font-color);

    &__container {
        height: calc(100vh - 77rem);
    }

    &__list {
        margin: 0 12rem;
        background-color: var(--background-color);

        border-radius: 10rem;
        padding: 10rem 10rem 0;
        max-height: calc(100vh - 107rem);
        overflow: scroll;
        border: 2rem solid var(--border-color);

        .item {
            @include flex(row, center);
            position: relative;

            &:first-child {
                margin-top: 0px;
            }

            &:last-child {
                border-bottom: 1rem solid transparent;

            }

            padding-bottom: 14px;
            padding-top: 4px;
            border-bottom: .5rem solid var(--border-color);
            margin-top: 10rem;

            &__frist-word {
                height: 50rem;
                width: 50rem;
                border-radius: 50%;
                background-color: rgba($color: $color-yellow, $alpha: 0.2);
                font-size: 24rem;
                color: $color-yellow;
                font-weight: 500;
                text-align: center;
                line-height: 50rem;
            }

            &__address {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            &__message {
                margin-left: 10rem;
                width: 200px;

                p {
                    font-size: 12rem;

                }

                p:first-child {
                    margin-bottom: 10rem;
                    font-size: 16rem;
                }

            }

            &__edit {
                @include absolutePOS($r: 4rem, $t: 20rem)
            }
        }
    }

    &__control {
        position: fixed;
        height: 60px;
        width: 100vw;
        background-color: var(--background-color);
        border-top: 1rem solid var(--border-color);
        @include position($l: 0, $b: 0);
        padding: 0 14rem;
        box-sizing: border-box;
        @include flex(row, center, space-between);
        font-size: 14rem;

        button {
            border-radius: 20rem;
            padding: 12rem 14rem;
            outline: none;
            border: none;
            background-color: rgba($color: $color-yellow, $alpha: 0.2);
            color: $color-yellow;

            &:last-child {
                width: 78%;
                background-color: $color-yellow;
                color: white;

                &.delete {
                    background-color: #ff5d5d;

                }
            }
        }
    }
}
</style>